<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="/static/layui/css/layui.css" rel="stylesheet">

    <link href="/static/css/left.css" rel="stylesheet">

    <link rel="stylesheet" href="/static/chosen/docsupport/prism.css">
    <link rel="stylesheet" href="/static/chosen/chosen.css">

    <style>
        body{
            background-color: #fafafa;
        }

        .right_content{
            width: 1010px;
            padding: 1%;

        }
        .right_content .right_ch{
            padding: 1% 0px;
        }
        .title_content .prefix_d span{
            font-size: 18px;
            color: #276040;
        }
        .layui-btn.layui-bg-blue{
            background-color: #276040 !important;
        }
        /*th{
            border-left: solid 1px #ffffff !important;
            border-top: solid 1px #ffffff !important;
            border-right: solid 1px #ffffff !important;
            background-color: #fafafa;
            padding: 0px 25px !important;
            height: 50px ;
        }
        td{
            border-left: solid 1px #ffffff !important;
            border-right: solid 1px #ffffff !important;
            border-: solid 1px #ffffff !important;
            padding: 0px 25px !important;
            height: 50px;
            color: #a9a9a9 !important;
        }*/

        /*tbody tr td button{
            border-color: #276040 !important;;
            color: #276040 !important;
            border-radius: 5px !important;

        }*/
        /*.layui-col-md4 .layui-input-wrap input:first-child{
            border-right: none !important;
        }
        .layui-col-md4 .layui-input-wrap input:last-child{
            border-left: none !important;
        }*/

        .layui-col-md4 .layui-input-wrap input[type="text"]:focus{
            border: 1px solid #276040 !important;
        }

        .layui-input-wrap input{
            padding-right: 0px !important;
            font-size: 13px !important;
            height: 30px  !important;
        }

        .prefix_d{
            padding: 0px 20px 0px 20px !important;
            font-size: 13px;
        }
        .group_{
            display: flex;
            align-items: center ;
        }

        .group_ input:hover{
            border: 1px solid #276040 !important;
        }

        .type_content{
            display: flex;align-items: center
        }
        .cur2 {
            background-color: #e8efe5 !important;
            color: #276040 !important;
        }
        .cur3{
            background-color: #f2f2f2 !important;
        }

        .type_content button{
            /**/
            font-weight: bold !important;
            border-radius: 5px !important;
        }

        .type_content button:hover {
            border: 1px solid #276040 !important;
        }
        .query_content .layui-btn.vb3{
            margin-left: 20px;
            background-color: #276040 !important;
        }
        .layui-col-md4{
            width: 170px !important;

        }
        .layui-input-suffix{
            line-height: 30px  !important;
        }
        .th_d{
            display: flex;
            align-items: center !important;
        }
        .th_d div{
            line-height: 1px;
            margin-right: 15px;
        }

        .layui-form-checked[lay-skin=primary]>i {
            border-color: #276040 !important;
            background-color: #276040 !important;
        }
        .layui-icon.layui-icon-ok:hover{
            border: 1px solid #276040 !important;
        }
        .chosen-container-active .chosen-choices {
            border: 1px solid #276040 !important;
        }
        .chosen-container .chosen-results li.highlighted {
            background-color: #276040 !important;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #276040), color-stop(90%, #276040)) !important;
            background-image: linear-gradient(#276040 20%, #276040 90%) !important;
            color: #fff;
        }
        .result-selected{
            background-color: #e8efe5 !important;
        }
        .cb2{
            height: 30px;
            line-height: 30px;
        }
        .vb4{
            color: #276040;
            border: 1px solid #276040 !important;
        }
        input.vb4:hover{
            border: 1px solid #276040 !important;
        }

        

    </style>

</head>
<body>

   <div th:replace="/navigation_bar/top :: headerFragment"></div>
    <div class="content" style="max-width: 1220px; display: flex;margin: 0 auto;padding: 2% 0;justify-content: space-between;">

        <div th:replace="/navigation_bar/left :: left_layout"></div>
        <div class="right_content">
            <div class="title_content right_ch">
                <div class="prefix_d ">
                    <span>所有产品</span>
                </div>
            </div>
            <div class="query_content right_ch">

                <div>
                    <div class="group_">
                        <div class="prefix_d ">
                            产品名称
                        </div>

                        <div class="layui-col-md4 ">
                            <div class="layui-input-wrap">
                                <input type="text" placeholder="产品名称" class="layui-input">
                            </div>
                        </div>

                        <div class="prefix_d">
                            上市时间
                        </div>
                        <div class="layui-col-md4" >
                            <div class="layui-input-wrap">
                                <input type="text" placeholder="开始日期" id="startTime" class="layui-input" style="border-right: none" autocomplete="off">
                                <div class="layui-input-suffix">
                                    -
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4" >
                            <div class="layui-input-wrap">
                                <input type="text" placeholder="结束日期" id="endTime" class="layui-input" style="border-left: none" autocomplete="off">
                            </div>
                        </div>

                        <div class="prefix_d ">
                            客户选择
                        </div>

                        <div class="layui-col-md4 ">
                            <div class="layui-input-wrap">
                                <input type="text" placeholder="客户选择" class="layui-input">
                            </div>
                        </div>
                        <!--<button type="button" class="layui-btn old_" >全部删除</button>

                        <button type="button" class="layui-btn " style="display: none">全部删除</button>-->
                    </div>
                </div>
                <div style="display: flex;align-items: center;margin-top: 20px;">
                    <div class="prefix_d ">
                        产品品类
                    </div>
                    <div>
                        <select data-placeholder=" " class="chosen-select" tabindex="2" multiple>
                            <option value=""></option>
                            <option value="服饰鞋帽">服饰鞋帽</option>
                            <option value="医疗/保健/个护">医疗/保健/个护</option>
                            <option value="工艺品">工艺品</option>
                            <option value="电子产品">电子产品</option>
                            <option value="家用电器">家用电器</option>
                            <option value="家居百货/厨房用品">家居百货/厨房用品</option>
                            <option value="户外/运动">户外/运动</option>
                        </select>
                    </div>
                    <button type="button" class="layui-btn vb3 cb2" >筛选</button>

                    <div style="margin-left: 267px;">
                        <button type="button" class="layui-btn layui-btn-primary layui-border cb2 vb4">加入导出列表</button>
                        <button type="button" class="layui-btn vb3 cb2" >导出列表</button>
                    </div>

                </div>

            </div>
            <div class="table_content right_ch">

            </div>
        </div>
    </div>

   <script src="/static/chosen/docsupport/jquery-3.2.1.min.js"></script>
   <!--<script src="/static/chosen/chosen.jquery.js" type="text/javascript"></script>-->
   <!--<script src="/static/chosen/docsupport/prototype-1.7.0.0.js" type="text/javascript"></script>
   <script src="/static/chosen/chosen.proto.js" type="text/javascript"></script>
   <script src="/static/chosen/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
   <script src="/static/chosen/docsupport/init.proto.js" type="text/javascript" charset="utf-8"></script>-->

   <script src="/static/chosen/chosen.jquery.js"></script>

   <!--<script src="/static/js/jquery-2.2.2.min.js"></script>-->

<script src="/static/layui/layui.js"></script>

<script src="/static/js/left.js"></script>


<script>

    $(".chosen-select").chosen({disable_search_threshold: 10,width:"270px"});

    /*$(".chosen-select").chosen({
        width: "100%",
        disable_search_threshold: 10
    });*/

   /* $.ajax({
        url: '/user/all',// 上传地址
        type: 'POST',
        data: {param: ""},
        cache: false,//不启用缓存
        dataType: "json",//返回json格式的数据
        success: function (data) {
            //$('#tbody').children().remove()
            set_table_data(data.data);
        }
    })*/
    function set_table_data(data){

        let html = "";
        for (k in data){
            let item = data[k]
            html += `
                        <tr>
                            <td>
                                <div class="layui-form">
                                    <input type="checkbox" name="product_id" lay-skin="primary">`+item.productName+`
                                    <!--<input type="checkbox">-->
                                </div>
                            </td>

                            <td>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="del('`+item.id+`', this)">删除</button>
                            </td>
                        </tr>
            `
        }
        $('#tbody').append(html)
    }

    function del(id,e){

        /*$.ajax({
            url: '/user/delete',// 上传地址
            type: 'POST',
            data: {id: id},
            cache: false,//不启用缓存
            dataType: "json",//返回json格式的数据
            success: function (data) {
                if (data.success){
                    $(e).parent().parent().remove();
                }

            }
        })*/
    }


   layui.use(function(){
       var laydate = layui.laydate;
       // 渲染
       laydate.render({
           elem: '#startTime',
           theme: '#276040'
       });
       // 英文版
       laydate.render({
           elem: '#endTime',
           theme: '#276040'

       });
   });



</script>
</body>
</html>